<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
    <el-dialog title="" :visible.sync="Show" :fullscreen='true' :show-close='false' append-to-body custom-class="fh-fulldialog fh-pointer-plan" :close-on-press-escape='false'>
        <!-- 自定义关闭按钮 -->
      <div class="dialog-header-wrap line-with-verticl">
        <div class="line-with-verticl"></div>
        <div class="dialog-header-handle">
          <div class="plantitle">{{hydrantInfo.hydrantName}}</div>
          <div class="handle-tools">
            <div class="map-listchange__mode"
                 :class="{'map-mode-select':isSelectMode}"
                 @click="changeMode('map')"
                 >
              <i class="icon-map-location">
                <icon-svg icon-class="ditumoshi" />
              </i>地图模式
            </div>
            <div class="map-listchange__mode" :class="{'list-mode-select':!isSelectMode}" @click="changeMode('list')"><i><icon-svg icon-class="listview" /></i>列表模式</div>
            <div class="dialog-handle-items" @click="init"><i class="el-icon-refresh"></i></div>
            <div class="dialog-handle-items" @click="closeDialog"><i class="el-icon-close"></i></div>
          </div>
        </div>
      </div>
        <el-container>

            <el-main>
                <!-- 右侧地图展示框 -->
                <div class="amap-page-container" v-show="isSelectMode">
                    <el-amap vid="amapDemo" :zoom="zoom" :center="mapCenter" :events="mapevents" class="amap-demo" >
                      <el-amap-circle v-for="(pmarker,index) in markers"
                                      :key="'a'+index"
                                      :center="pmarker.position"
                                      :radius="pmarker.protectionRadius"
                                      strokeOpacity="0"
                                      fillColor="#2683f5"
                                      fill-opacity="0.6">
                      </el-amap-circle>
                      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :vid="index">
                        <div class="hymap-marker-wrap">
                          <el-popover placement="top-end" width="250" offset="-10" trigger="click" @show="sensorStatus()" popper-class="hypopper">
                            <div class="hypopper-box">
                              <el-scrollbar style="height: 100%;">
                              <div class="hymap-list" v-for="(item, index) in hymaplist" :key="index" v-if="hymaplist.length>0">
                                <div class="hy-title">
                                  {{item.equipmentType}} <span>({{item.sensorNo}})</span>
                                </div>
                                <p class="hy-lasttime">{{item.time}}</p>
                              </div>
                                <div v-if="hymaplist.length<=0">暂无数据</div>
                              </el-scrollbar>
                            </div>
                          <div class="hymain-map-marker" slot="reference" :class="{'hymain-map-marker__abnormal': marker.status=='0', 'hymain-map-marker__normal': marker.status=='2'}">
                              <icon-svg icon-class="xiaofangshuan" style="fill:#ffffff" />
                          </div>
                          </el-popover>
                        </div>
                      </el-amap-marker>
                    </el-amap>
                </div>
                <!--右侧列表显示-->
              <div class="plan-listbox" v-show="!isSelectMode" style="height: calc(100vh - 66px);">
                <el-row style="padding: 0 0 24px 30px; height: 100%;">
                  <el-row style="height: 40px;text-align: right;line-height: 40px;">状态
                    <el-select v-model="queryalamlist.status" placeholder="请选择" size="mini">
                      <el-option label="全部" value="-1"></el-option>
                      <el-option label="正常" value="2"></el-option>
                      <el-option label="故障" value="0"></el-option>
                      <el-option label="离线" value="4"></el-option>
                    </el-select>
                    <el-button type="primary" @click="searchByStatus" size="mini">查询</el-button>
                  </el-row>
                  <el-row style="margin-top: 32px;height:calc(100% - 60px)">
                    <el-scrollbar style="height:100%">
                      <el-table
                        :data="alrmtableData"
                        v-loading.body="alamLoading"
                        style="width: 100%">
                        <el-table-column
                          label="状态">
                          <template slot-scope="scope">
                              <span
                                :style="{color:scope.row.color}">{{scope.row.status}}
                              </span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="设备编号">
                          <template slot-scope="scope">
                            <span>{{scope.row.sensorNo}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="系列">
                          <template slot-scope="scope">
                            <span>{{scope.row.equipmentType}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="位置描述">
                          <template slot-scope="scope">
                            <span>{{scope.row.positionDescription}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="实时数据">
                          <template slot-scope="scope">
                            <el-button type="text" @click="viewActual(scope.row.id,scope.row.sensorNo,scope.row.equipmentType)">点击查看</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <el-footer>
                        <div class="pagination-container">
                          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryalamlist.page"
                                         :page-sizes="[10,20,30,40]" :page-size="queryalamlist.limit" layout="total, sizes, prev, pager, next, jumper" :total="alamtotal">
                          </el-pagination>
                        </div>
                      </el-footer>
                    </el-scrollbar>
                  </el-row>
                </el-row>
              </div>
              <!-- 左侧信息展示框 -->
              <div class="fh-plan-pannel" :class="{'fh-plan-pannel-close':isClosed}">
                  <div class="outdoor-plan-wrap"><div class="wrap-with-halfboder"></div>
                    <el-scrollbar style="height: 100%;">
                  <div class="pannel-address">
                    <p>地址：{{buildinfo.address}}</p>
                    <p>联网单位：{{buildinfo.oName}}</p>
                    <p>电话：{{buildinfo.oPhone}}</p>
                  </div>
                  <div class="pannel-alarm-floor">
                    <div class="f-title"><i class="el-icon-caret-right"></i>实时监控</div>
                    <div class="f-list">
                      <p v-if="abnormalFloor.length<1">暂无数据</p>
                      <p v-for="item in abnormalFloor" :key="item.floor" v-else><span>{{item.measuringPoint}}</span><span>{{item.data}}</span></p>
                    </div>
                    <div class="device-chart-box" v-show="deviceUnable>0">
                      <i class="icon-jinggao"><icon-svg icon-class="jinggao" style="fill: #f5a623" /> </i>{{deviceUnable}}个设备未启用
                      <el-button type="text" @click="viewUnableList()">点击查看</el-button>
                    </div>
                  </div>
                  <div class="pannel-sensor-list">
                    <div class="ps-title">
                      <i class="el-icon-caret-right"></i>出水口信息
                    </div>
                    <ul class="sensor-list" style="height: 100%;" v-loading="loading">
                      <li v-for="item in sensorTypelist" :key="item.outletValue" class="outdoor-list-flex">
                        <span>{{item.name}}</span>
                        <span>{{item.outletValue}}mm</span>
                        <span>{{item.outletType}}</span>
                      </li>
                    </ul>
                  </div>
                  <div class="plan-alarm-recorde">
                    <p class="ar-title"><i class="el-icon-caret-right"></i>报警记录</p>
                    <ul class="recorde-list" style="height:260px" v-loading="recoderloading">
                      <el-scrollbar style="height: 100%;">
                        <p v-if="abnormalList&&abnormalList.length<1">
                          暂无报警记录
                        </p>
                        <li v-else v-for="(item,index) in abnormalList" :key="index">
                          <div class="item-name">
                                        <span class="recorde-title" :title="item.equipmentType">
                                          <i><icon-svg icon-class="checklocal" style="fill: #FF3829;"/></i>
                                          {{item.equipmentType}}
                                        </span>
                          </div>
                          <div class="item-date">
                                      <span v-if="item.alrmType" :title="item.alrmType">
                                        {{item.alrmType}}
                                      </span>
                            <span v-if="item.measuringPoint">
                                        {{item.measuringPoint}}
                                      </span>
                            <span :title="item.alrmData">{{item.alrmData}}</span>
                            <span v-if="item.alrmDate" :title="item.alrmDate">{{item.alrmDate}}</span>
                          </div>
                        </li>
                        <p style="text-align: center;" v-show="showMore">
                          <span @click="alarmList()" style="color:#50E3C2;font-size:14px;cursor:pointer">查看更多</span>
                        </p>
                      </el-scrollbar>
                    </ul>
                  </div>
                    </el-scrollbar>
                  </div>
                <!-- <div class="plan-close-btn" :class="{'plan-close-btn__close':isClosed}" @click="toggleClose">
                  <i class="el-icon-arrow-left"></i>
                </div> -->
              </div>
            </el-main>
            <ActualData :Show.sync="isactiondata" :sensorid="sensorid"  :sensornum="sensornum" :sensortype="sensortype"></ActualData>
           <unabledList :Show.sync="isNotabledShow" :channelId="channelId" :hydrantId="id"></unabledList>
        </el-container>
    </el-dialog>
</template>
<script>
import {
  getHydrantAbnormalList,
  getHydrantBuildInfo,
  getHydrantOutletInfo,
  getHydrantMonitorInfo,
  getHydrantPos,
  getHydrantDeviceList,
  getHyUnsignCount,
  getHyMapList
} from "@/api/device/realtimePoints/index";
import ActualData from "@/components/ActualData/hyindex";
import unabledList from "./hynotabledList";
// 地图组件
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();

export default {
  name: "positionDialog",
  components: { ActualData,unabledList },
  props: {
    Show: {
      required: true,
      default: false
    },
    id: {
      required: true,
      default: false
    },
    channelId:{
      type: String,
      default: ""
    },
  },
  data() {
    let self = this;
    return {
      hydrantInfo:{},
      deviceUnable:'',
      isSelectMode:true,
      isNotabledShow:false,
      queryalamlist:{
        page:1,
        limit:10,
        status:"-1"
      },
      alamLoading:false,
      alrmtableData:[],
      hymaplist:[],
      alamtotal:0,
      markers:[],
      mapMarker:[],
      statusCount: {},
      floorStatusCount: {},
      sensorTypelist: [],
      abnormalList: [],
      abnormalFloor: [],
      buildinfo: {},
      showMore: false,
      floor: 1,
      page: 0,
      total: 0,
      isClosed: false,
      loading: false,
      recoderloading: false,
      sensorid: "",
      sensornum: "",
      sensortype: "",
      isactiondata: false,
      // 地图
      zoom: 19,
      amapManager,
      mapevents: {
        init: o => {
          o.setMapStyle('amap://styles/117f36d1e643cfd46d21660d866df29e');
          AMapUI.loadUI(["control/BasicControl"], function(BasicControl) {
            //缩放控件
            o.addControl(
              new BasicControl.Zoom({
                position: "rb" //left top，左上角
              })
            );
          });
        },
        zoomend: () => {
          let zoomedLevel = document.querySelector(".amap-ui-control-zoom-num")
            .innerText;
          self.zoom = parseInt(zoomedLevel);
        },
      },
      mapCenter: [116.602489, 40.080734],
    };
  },
  methods: {
    // 报警记录
    alarmList() {
      this.recoderloading = true;
      this.page = this.page + 1;
      let cpage = this.page;
      getHydrantAbnormalList({id:this.id,page: cpage, limit: 10}).then(res => {
        this.recoderloading = false;
        this.total = res.data.total;
        this.abnormalList = this.abnormalList.concat(res.data.rows);
        let totalPage = parseInt((this.total + 9) / 10);
        this.showMore = cpage - totalPage < 0;
      });
    },
    sensorStatus(){
      getHyMapList({channelId:this.channelId,hydrantId:this.id}).then(res=>{
         this.hymaplist= res.data
      })
    },
    getUnsignstat(){
      //未启用
      getHyUnsignCount({channelId:this.channelId,hydrantId:this.id}).then(res => {
        this.deviceUnable = res.data.rows.length;
      })
    },
    searchByStatus(){
      this.queryalamlist.page=1;
      this.queryalamlist.limit=10;
      this.getalamData();
    },
    handleSizeChange(val){
      this.queryalamlist.limit=val;
      this.getalamData();
    },
    handleCurrentChange(val){
      this.queryalamlist.page=val;
      this.getalamData();

    },
    viewActual(val,num,type){
      this.sensorid=val;
      this.sensornum=num;
      this.sensortype=type;
      this.isactiondata=true;
    },
    getalamData(){
      //列表模式请求
      this.alamLoading=true;
      getHydrantDeviceList( Object.assign({channelId:this.channelId,hydrantId:this.id},this.queryalamlist)).then(res=>{
        this.alrmtableData=res.data.rows;
        this.alamtotal=res.data.total;
        this.alamLoading=false;
      }).catch(()=>{
        this.alamLoading=false;
      })
    },
    viewUnableList(){
      //  未启用列表
      this.isNotabledShow = true;

    },
    resetalamquery(){
      this.queryalamlist.page=1;
      this.queryalamlist.limit=10;
      this.queryalamlist.status="-1";
    },
    changeMode(type){
      switch(type){
        case "map":
          this.isSelectMode=true;
          break;
        case "list":
          this.resetalamquery();
          this.getalamData();
          this.isSelectMode=false;
          break;
      }
    },
    //建筑物信息
    buildInfo() {
      getHydrantBuildInfo({id:this.id}).then(res => {
        this.buildinfo = res.data;
      });
    },
    getFloorAlarm() {
      this.getMonitorInfo();
      // 出水口信息列表
      this.getOutletNum();
      //报警记录列表
      this.alarmList();
    },
    getMonitorInfo() {
      getHydrantMonitorInfo({hydrantId:this.id}).then(res => {
        this.abnormalFloor = res.data;
      });
    },
    getOutletNum() {
      this.loading = true;
      getHydrantOutletInfo({id:this.id}).then(res => {
        this.loading = false;
        this.sensorTypelist = res.data;
      });
    },
    getPos(){
      getHydrantPos({id:this.id}).then(res=>{
        this.hydrantInfo = res.data;
        let gis = [Number(res.data.gix.split(",")[0]),Number(res.data.gix.split(",")[1])];
        this.mapCenter = gis;
        setTimeout(()=>{
          this.markers = [];
          this.markers.push({position:gis,protectionRadius:res.data.protectionRadius,status:res.data.status});
        },0)
      })
    },
    init() {
      //传感器报警楼层
      this.getFloorAlarm();
      //建筑物信息
      this.buildInfo();
      this.getPos();
      //未启用数量
      this.getUnsignstat();
    },
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.$emit("update:Show", false);
    },
    toggleClose() {
      this.isClosed = !this.isClosed;
    }
  },
  mounted() {},
  watch: {
    Show(v) {
      if (v) {
        let self = this;
        this.$nextTick(() => {
          self.init();
        });
      } else {
        this.abnormalList = [];
        this.page = 0;
        this.changeMode("map");
        this.isClosed = false;
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
  .hypopper{
    .hy-title{
      text-align: left;
      color: #fff;
      word-break: break-all;
      span{
        color:rgba(255,255,255,.7);
      }
    }
    .hy-lasttime{
      text-align: left;
      color: rgba(255,255,255,.7);
      font-size: 12px;
      margin: 0;
    }
    .el-scrollbar__wrap{
      overflow-x: hidden;
    }
    .hypopper-box{
      width: 100%;
      height: 120px;
    }
  }
  .amap-page-container{
    z-index:1;
  }
  .amap-logo,.amap-copyright{
    display: none !important;
  }
.s-statistics-item__table {
  width: 80px;
  height: 80px;
}
.sensor-detail-box,
.plan-handler,
.plan-listbox,
.recorde-list,
.fh-plan-pannel {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.drag-ele {
  height: 50px;
  width: 50px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
}
.fh-fulldialog {
  .plan-listbox{
    width: calc(100% - 20px - 360px);
  }
  .recorde-title {
    font-size: 14px;
    line-height: 28px;
    display: inline-block;
    width: 95%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
  }
  .item-date {
    color: rgba(255, 255, 255, 0.7);
  }
  &.fh-pointer-plan {
    &:before{
      border: 0;
    }
    .el-dialog__body{
      &>.el-container{
        height: calc(100% - 66px);
      }
    }
    .el-main{
      padding: 0;
      height: 100%;
      overflow: hidden;
      position: relative;
    }
    .outdoor-plan-wrap{
      position: relative;
      height: calc(100% - 20px);
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      li {
        margin-left: 0;
      }
    }
    .f-title,
    .ps-title,
    .ar-title {
      font-size: 18px;
      padding-bottom: 10px;
      margin: 0;
      color: #50E3C2;
      i{
        color: rgba(80, 227, 194, 0.5);
      }
    }
    .pannel-alarm-floor,
    .pannel-sensor-list,
    .plan-alarm-recorde,
    .plan-statistics-table,
    .pannel-address {
      padding: 25px 20px;
      box-sizing: border-box;
    }
    .plan-statistics-table {
      .s-container {
        display: flex;
        padding-top: 10px;
        .s-statistics-item {
          flex: 1;
        }
        .s-statistics-item__table {
          margin: 0 auto;
        }
        .s-statistics_itme__txx {
          font-size: 12px;
          padding-left: 15px;
          padding-top: 20px;
          p {
            margin: 0;
            line-height: 1.4;
          }
        }
      }
    }
    .pannel-alarm-floor {
      min-height: 148px;
      .f-list {
        p {
          span:last-of-type {
            float: right;
          }
        }
      }
    }
    .pannel-sensor-list {
      height: 230px;
      .outdoor-list-flex{
        display: flex;
        justify-content:space-between;
        line-height: 30px;
        span{
          display: block;
          width: 100px;
          &:first-child{
             width: 150px;
          }
          &:last-child{
            text-align: right;
          }
        }
      }
    }
    .plan-alarm-recorde {
      .recorde-list {
        li {
          font-size: 12px;
          padding-bottom: 18px;
          &:hover{
            background: rgba(0,0,0,.3);
          }
        }
      }
    }
    .pannel-address {
      padding-top: 10px;
      border-bottom: 1px solid rgba(80, 227, 194, 0.7);;
      p {
        margin: 0;
        line-height: 2.2;
      }
    }
    .fh-plan-pannel {
      width: 360px;
      height:100%;
      position: absolute;
      z-index: 159;
      top: 0;
      left: 20px;
      background: #0A1722;
      transform: translateX(0px);
      transition: all 0.3s;
      .plan-close-btn {
        z-index: 159;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: -4px;
        width: 22px;
        height: 0;
        border-top: 14px solid #50E3C2;;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        transform: rotate(90deg);
        .el-icon-arrow-left {
          color: #000;
          transform: rotate(-90deg) translateX(15px);
        }
      }
      &.fh-plan-pannel-close {
        transform: translateX(-360px);
        transition: all 0.3s;
        .plan-close-btn {
          transform: rotate(-90deg) translateY(15px);
        }
      }
    }
    .amap-page-container {
      width: 100%;
      height: 100%;
      .hymap-marker-wrap {
        .hymain-map-marker {
          display: inline-block;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border:2px solid #fff;
          position: relative;
          text-align: center;
          vertical-align: middle;
          .svg-icon{
            position: relative;
            top: 3px;
          }
          &.hymain-map-marker__normal {
            background: #2683F5;
          }
          &.hymain-map-marker__abnormal {
            background: #F5A623;
          }
        }
      }
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 24px;
      top: 14px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .el-header {
      padding: 0;
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      .is-vertical {
        height: 100%;
      }
    }
    .plantitle {
      text-align: center;
      font-size: 20px;
      span {
          font-size: 16px;
      }
    }
    .plan-handler {
      margin-left: 10px;
      margin-right: 5px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      .plan-floor-list {
        width: 57px;
        margin: 0;
        padding: 0;
        margin-right: 10px;
      }
      .plan-floor-item {
        cursor: pointer;
        font-size: 14px;
        width: 57px;
        text-align: center;
        line-height: 37px;
        margin: 3px 0;
        height: 37px;
        border-radius: 3px;
        color: #fff;
        background: #9fbee4;
        &.floor-selected {
          background: #409eff;
        }
      }
    }
    .plan-imgbox {
      height: 100%;
      .img-view-wrap {
        position: absolute;
        left: 10px;
        top: 10px;
        bottom: 10px;
        right: 10px;
        overflow: hidden;
        .img-view-body {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          overflow: hidden;
          cursor: pointer;
          img {
            cursor: move;
          }
          .sensor-pointer {
            position: absolute;
            color: #fff;
            width: 1px;
            height: 1px;
            &.abnoraml {
              color: #2d2f33;
            }
            &.alarm {
              color: red;
            }
            .svg-icon {
              position: absolute;
              font-size: 30px;
            }
          }
        }
      }
    }
  }
}
// 传感器hover css
.sensor-detail-box {
  font-size: 12px;
  padding-left: 10px;
  .ss-header-box {
    font-size: 14px;
  }
  .ss-status-list {
    height: 140px;
    .ss-status-list__item {
      line-height: 20px;
      span {
        padding: 0 5px;
        &:not(:first-child):not(:last-child) {
          border-right: 1px solid #ddd;
        }
        &.status-item-title {
          border-left: 0;
          padding-left: 0;
        }
        &.color-pointer {
          color: #01a050;
          display: inline-block;
          width: 10px;
          height: 10px;
          vertical-align: middle;
          background: currentColor;
          clip-path: circle(14%);
        }
      }
    }
  }
  .ss-status-title {
    margin: 0;
    padding: 8px 0;
  }
  .ss-title {
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .el-scrollbar__bar.is-horizontal {
    display: none;
  }
}
.real-scaleimg {
  background: #ffffff;
  position: absolute;
  bottom: 20px;
  right: 100px;
  cursor: pointer;
  border: solid 1px #d4d4d4;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
  text-align: center;
}
.statistics-box {
  display: flex;
  padding: 8px 0;
  .statis-box-item {
    flex: 1;
    border-left: 1px solid #dfdfdf;
    &:first-child {
      border-left: 0;
    }
  }
  border-bottom: 1px solid #dfdfdf;
  p {
    margin: 0;
    text-align: center;
    line-height: 26px;
  }
  color: #000;
  .s-title {
    font-size: 14px;
  }
}
.mypopper {
  transform: translateX(17px);
}
@keyframes warn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.icon-sensor-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  position: absolute;
  left: 7px;
  top: 20px;
  &.dot-alarm {
    color: #ff0000;
    background: #ff0000;
  }
  &.dot-abnoraml {
    color: #f08719;
    background: #f08719;
  }
  &::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    left: -22px;
    top: -22px;
    border: 30px solid currentColor;
    border-radius: 30px;
    z-index: 0;
    opacity: 0;
    animation: warn 3s ease-out;
    animation-iteration-count: infinite;
  }
}
.floor-breakdown {
  span {
    color: #f08719;
  }
}
.floor-alarm {
  span {
    color: red;
  }
}
.img-left-bar {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 390px;
  height: 40px;
  float: left;
  display: flex;
  .map-list-change {
    background: #fff;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.19);
    border-radius: 1px;
    margin-right: 10px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    border: 1px solid #dddddd;
    .map-listchange__mode {
      padding: 10px 0;
      &:first-child {
        margin-right: 15px;
        .icon-map-location {
          font-size: 16px;
        }
      }
      &.map-mode-select {
        color: #2683f5;
      }
      &.list-mode-select {
        color: #2683f5;
        .class-icon-san {
          border-top: 2px solid #2683f5;
          border-bottom: 2px solid #2683f5;
          background: #2683f5;
          background-clip: content-box;
        }
      }
    }
    .class-icon-san {
      display: inline-block;
      width: 18px;
      vertical-align: middle;
      height: 2px;
      padding: 2px 0;
      border-top: 2px solid #999;
      border-bottom: 2px solid #999;
      background: #999;
      background-clip: content-box;
      box-sizing: content-box;
      margin-right: 5px;
    }
  }
}
.plan-listbox {
  width: calc(100% - 82px - 360px);
  margin-left: 360px;
  height: 100%;
}
.el-table th {
  background: #f5f7fa;
}
.item-date {
  height: 17px;
  line-height: 17px;
  margin-left: 10px;
  width: 95%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  span {
    padding: 0 5px;
    &:not(:last-child) {
      border-right: 1px solid #d1d1d1d1;
    }
  }
}
</style>
